<template>
    <cell-wrapper
        v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
        :key="wrapperType"
        :wrapper-type="wrapperType"
        :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
        <!-- 默认状态 -->
        <text-display-cell v-if="!isEdit" :text="formatValue" :columnConfig="columnsConfig" v-bind="contentStyle" />
        <!-- 编辑状态 -->
        <a-input-number v-else :value="value" @change="handleValueChange" />
    </cell-wrapper>
</template>

<script>
    import { computed, defineComponent } from 'vue'
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue'
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue'
    import { addThousandsSeparatorToNumber } from '@/utils/index'
    export default defineComponent({
        components: {
            TextDisplayCell,
            CellWrapper
        },
        props: {
            // 当前单元格的值
            value: {
                type: Number,
                default: () => {
                    return null
                }
            },
            // 单元格的默认样式
            defaultStyle: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 单元格的条件样式配置
            conditionStyle: {
                type: Array,
                default: () => {
                    return []
                }
            },
            // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
            conditionValue: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 格式化配置
            format: {
                type: String,
                default: () => {
                    return ''
                }
            },
            // 当前列的配置
            columnsConfig: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 当前单元格是否处于编辑状态
            isEdit: {
                type: Boolean,
                default: () => {
                    return false
                }
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            // 检查当前值是否符合某一项条件
            function checkCondition(condition) {
                const { conditionType, conditionValue } = condition
                const currentConditionValue = props.conditionValue[conditionValue.id]

                // 如果条件值或单元格的值不存在，则不满足条件
                if (
                    currentConditionValue === undefined ||
                    currentConditionValue === null ||
                    props.value === undefined ||
                    props.value === null
                ) {
                    return false
                }

                switch (conditionType) {
                    case 'GT': // 大于
                        return props.value > currentConditionValue
                    case 'LT': // 小于
                        return props.value < currentConditionValue
                    case 'EQ': // 等于
                        return props.value == currentConditionValue
                    case 'NE': // 不等于
                        return props.value != currentConditionValue
                    case 'GE': // 大于等于
                        return props.value >= currentConditionValue
                    case 'LE': // 小于等于
                        return props.value <= currentConditionValue
                    default:
                        return false
                }
            }

            const formatValue = computed(() => {
                if (props.format === 'THOUSANDS_SEPARATOR') {
                    return addThousandsSeparatorToNumber(props.value)
                }

                return props.value
            })

            // 内容显示的样式
            const contentStyle = computed(() => {
                let { iconType, icon, color, backgroundColor } = props.defaultStyle || {}

                ;(props.conditionStyle || []).forEach(item => {
                    const { condition, style } = item

                    // 如果没有条件配置或样式配置，则跳过该条件样式
                    if (!condition || !style) {
                        return
                    }

                    // 如果条件满足，则使用该条件的样式覆盖默认样式
                    if (checkCondition(condition)) {
                        style.iconType && (iconType = style.iconType)
                        style.icon && (icon = style.icon)
                        style.color && (color = style.color)
                        style.backgroundColor && (backgroundColor = style.backgroundColor)
                    }
                })

                return { iconType, icon, color, backgroundColor }
            })

            function handleValueChange(value) {
                emit('change', value)
            }

            return {
                contentStyle,
                formatValue,

                handleValueChange
            }
        }
    })
</script>
